<script lang="ts">
import { defineComponent } from "vue";
import { Router } from "@/utils/router";
import { AppData } from "@/utils/app";

export default defineComponent({
  props: {
    position: { type: String, default: "fixed" }, // relative
    navigationBarTextStyle: { type: String, default: "black" }, // white
    zIndex: { type: Number, default: 98 },
  },
  setup() {
    const isHome = getCurrentPages().length === 1;

    const rectData = AppData.rectData;
    const top = rectData.menuButtonTop + (rectData.menuButtonHeight - 20) / 2;

    const backClick = () => {
      isHome ? Router.reLaunch("/pages/index/index") : Router.navigateBack();
    };
    return { isHome, top, backClick };
  },
});
</script>

<template>
  <view
    class="nav-back"
    :style="{
      position,
      left: position === 'fixed' ? '15px' : 0,
      top: position === 'fixed' ? `${top}px` : 0,
      zIndex,
    }"
    @click="backClick"
  >
    <image
      class="nav-back-icon"
      :src="
        isHome
          ? navigationBarTextStyle === 'black'
            ? '/static/nav-back3.png'
            : '/static/nav-back4.png'
          : navigationBarTextStyle === 'black'
          ? '/static/nav-back.png'
          : '/static/nav-back2.png'
      "
    />
  </view>
</template>

<style lang="scss">
.nav-back {
  .nav-back-icon {
    display: block;
    width: 20px;
    height: 20px;
  }
}
</style>